<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax文件上传</title>
    <!--导入顺序-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="js/jquery.fileupload.js"></script>
    <script type="text/javascript">
        function test() {
            $("#myFile").fileupload({
                url: "jsonUpload.action",
                //是不是安全的
                secureuri: false,
                fileElementId: "myFile",
                dataType: "json",
                //是不是自动上传
                autoUpload: true,
                success: function (data) {
                    $("#photo").attr("src", data.Path);

                }
            })
        }
    </script>
</head>
<body>
<div style="width: 100px;height: 100px;border-radius: 50%;border: 1px solid black">
    <img src="../../upload" alt="头像" id="photo" title="美不美" style="width: 100px;height: 100px;border-radius: 50%">
</div>
选择文件：<input type="file" id="myFile" name="myFile" onclick="test()">


</div>
</body>
</html>